﻿function $I(i){
    return document.getElementById(i);
}
function $C(c){
    return document.getElementsByClassName(c);//返回的是数组
}
var lunboxianshikuang=$I("lunboxianshikuang");
var oleft=$I("left");
var oright=$I("right");

oleft.addEventListener("click",fleft,false);
oright.addEventListener("click",fright,false);
////轮播
var imgarr= ["img/276_15.jpg","img/55595474N7727ee71.jpg","img/c71248d.jpg","img/b9d1.jpg",
    "img/201.jpg"];
var oimg1=$I("oimg1");
var oimg2=$I("oimg2");

var m=1;
function changeImg(){
    oimg1.src= oimg2.src;
    oimg1.style.left=0+'px';
    oimg2.style.left=750+'px';
    oimg1.style.transition='all 1s';
    oimg2.style.transition='all 1s';
    oimg2.src=imgarr[m];
    m++;
    if(m>=5){
        m=0
    }
}
//向左轮播
function fleft(){
    oimg1.style.left=-750+'px';
    oimg2.style.left=0+'px';
    oimg1.style.transition='all 1s';
    oimg2.style.transition='all 1s';
    setTimeout(changeImg,100);
}
//////向右轮播
function fright(){
    oimg1.style.left=1200+'px';
    oimg2.style.left=0+'px';
    oimg1.style.transition='all 1s';
    oimg2.style.transition='all 1s';
    setTimeout(changeImg,100);
}

//设置自动向左轮播
var tim1=setInterval(fleft,4000);

//设置当鼠标移动到lunboxianshikuang这个div的时候，轮播按钮分别向左右慢慢显示出来
lunboxianshikuang.onmouseover=function(){
    oleft.style.left=0+'px';
    oleft.style.transition='all 0.5s';
    oright.style.right=0+'px';
    oright.style.transition='all 0.5s';
    clearInterval(tim1)
};

//设置当鼠标离开lunboxianshikuang这个div的时候，轮播按钮分别向左右慢慢隐藏
lunboxianshikuang.onmouseout=function(){
    oleft.style.left=-62+'px';
    oleft.style.transition='all 1s';
    oright.style.right=-62+'px';
    oright.style.transition='all 1s';
    tim1=setInterval(fleft,4000);
};
//给游戏板块添加图片进去
var tupianjihe1=$I("tupianjihe1");//得到大框
var popUp=document.getElementById("dakuang");
var img1=$C("img1");//返回数组
var x1='img/youxi';
var y1='.jpg';
var chushineirong1=tupianjihe1.innerHTML;//把大框的初始内容赋给变量chushineirong1
for(var a1=0;a1<10;a1++){
    var t1=a1;
    img1[a1].src=x1+t1+y1;
    var xianzaineirong1=tupianjihe1.innerHTML;
    xianzaineirong1+=chushineirong1;
    tupianjihe1.innerHTML=xianzaineirong1;
}
tupianjihe1.lastElementChild.id='last1';
var last1=$I("last1");
last1.style.display="none";





//给视频板块添加图片进去
var tupianjihe2=$I("tupianjihe2");//得到大框
var img2=$C("img2");//返回数组
var x2='img/shipin';
var y2='.jpg';
var chushineirong2=tupianjihe2.innerHTML;//把大框的初始内容赋给变量chushineirong2
for(var a2=0;a2<10;a2++){
    var t2=a2;
    //console.log(shipintupiank[a2]);
    img2[a2].src=x2+t2+y2;
    var xianzaineirong2=tupianjihe2.innerHTML;
    xianzaineirong2+=chushineirong2;
    tupianjihe2.innerHTML=xianzaineirong2;
}
tupianjihe2.lastElementChild.id='last2';
var last2=$I("last2");
last2.style.display="none";

//给资源共享框添加图片
var tupianjihe3=$I("tupianjihe3");//得到大框
var img3=$C("img3");//返回数组
var x3='img/ziyuan';
var y3='.png';
var chushineirong3=tupianjihe3.innerHTML;//把大框的初始内容赋给变量chushineirong3
for(var a3=0;a3<3;a3++){
    var t3=a3;
    img3[a3].src=x3+t3+y3;
    var xianzaineirong3=tupianjihe3.innerHTML;
    xianzaineirong3+=chushineirong3;
    tupianjihe3.innerHTML=xianzaineirong3;
}
tupianjihe3.lastElementChild.id='last3';
var last3=$I("last3");
last3.style.display="none";
//插入文字
var p0=$C('p0');//返回数组
var zylx=$C('zylx');//返回数组
var arr1=['死亡扳机','梦回大唐','百层惊魂电梯','罗马万神殿VR体验','太平洋风云-轰炸龙骧号','Lilith-M','RollCoaster（过山车）',
    '山地车_bick','仰望星空','御龙湾','','冰箱历险记','终结者：创世纪','涂鸦','喜马拉雅','极地星空',
    'F1赛车','时代广场','欧洲拉力锦标赛','兰博基尼','恐怖故事','','VR Player','Stereoscopic Player','高清视频解码器'];
var arr2=['竞速游戏','竞速游戏','旅游观光','竞速游戏','旅游观光','旅游观光','竞速游戏','旅游观光','旅游观光','竞速游戏','','VR视频',
    '360全景','360全景','VR视频','360全景','VR视频','VR视频','360全景','360全景','VR视频','','资源分享','资源分享','资源分享'];
for(var x=0;x<arr1.length;x++){
    p0[x].innerHTML=arr1[x];
    zylx[x].innerHTML=arr2[x];
}
//设置当点击seemore时，yincangdiv显示,横线变长
var seemore=$I('seemore');
var yincangdiv=$I('yincangdiv');
var more=$I('more');
var zuohengxian=$I('zuohengxian');
var youhengxian=$I('youhengxian');
seemore.addEventListener('click',xianshi,false);
function xianshi(){
    more.style.display='none';
    yincangdiv.style.display='block';
}
setInterval(function(){
    zuohengxian.style.width=550+'px';
    youhengxian.style.width=550+'px';
    zuohengxian.style.transition='width 0.7s';
    youhengxian.style.transition='width 0.7s';
},700);

popUp.addEventListener("click",stopPro,false);
var img=document.getElementsByClassName("img");
var body=document.getElementsByTagName("body")[0];
var photo=$I("photo");
var title=$I("title"),state=0;
body.addEventListener("click",closePop,false);
for(var i=0;i<img.length;i++){
    img[i].addEventListener("click",photoCom,false);
}

function stopPro(event){
    event.stopPropagation();
}
function photoCom(){
    popUp.style.display="block";
    for(var i=0;i<img.length;i++){
        photo.src=this.src;
        if(this==img[i]){
            title.innerHTML=arr1[i];
        }
    }
    setTimeout(function(){
        state=1
    },10)
}
var close=$I("close");
close.addEventListener("click",closePop,false);
function closePop(){
    if(this==body&&state==0) return;
    else if(state==1)
        popUp.style.display="none";
    state=0;
}


